<template>
    <u-popup v-model="show" mode="center" :mask-close-able="false">
        <view class="wrapper" v-show="loaded">
            <img-cache :src="`${global.productImageUrl}${picId}/0`" width="100%" mode="widthFix" @click="option" id="img" @load="loaded = true"></img-cache>
        </view>
        <view class="cancel-wrapper" v-show="loaded">
            <text class="icon" @click="show = false">&#xe613;</text>
        </view>
    </u-popup>
</template>

<script lang="ts" setup>
import { computed, inject, ref } from 'vue'
import global from '@/config'

const ins = inject<any>('data')

const show = ref(true)

const loaded = ref(false)

const picId = computed(() => {
    return ins.image
})

const urlObj = computed(() => {
    return ins.url
})

function option() {
    show.value = false
    let { urlId, urlType, urlString } = urlObj.value
    uni.$u.$util.jumpByUrlType(urlId, urlType, urlString)
}
</script>

<style lang="scss" scoped>
.wrapper {
    width: 80vw;
}
#img {
    margin-bottom: -4px;
}

:deep(.u-mode-center-box) {
    background: transparent;
}
.cancel-wrapper {
    color: white;
    text-align: center;
    padding-top: 60rpx;
    .icon {
        font-size: 40px;
    }
}
</style>
